/*
 * @Description: 公共环境
 * @Author: wangqi
 * @Date: 2021-03-02 20:47:11
 * @LastEditTime: 2021-03-17 18:02:05
 */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const postcss = require('./postcss.config');
const ip = require('ip').address();
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const notifier = require('node-notifier');
// webpack 打包性能插件
const Visualizer = require('webpack-visualizer-plugin2');


module.exports = {
    entry: {
        main: './src/main.js',
        // index: './src/index.js',
    },
    // entry: ['./src/main.js', './src/index.js'],
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "js/[name]-[chunkhash:6].js",
        publicPath: "",
        chunkFilename: "js/[name]-[contenthash:4].chunk.js",
        // assetModuleFilename: 'imgs/[hash][ext]',
    },
    module: {
        noParse: /lodash/,
        rules: [
            // oneOf只对文件执行一次, 如果有重复的test 拎出去即可
            {
                oneOf: [
                    {
                        test: /\.(js|jsx)$/,
                        use: [{
                            loader: 'babel-loader',
                            options: {
                                // options、query不能和loader数组一起使用
                                // presets: ['@babel/preset-env'],
                                presets: [['@babel/preset-env', {
                                    useBuiltIns: 'usage',
                                    corejs: {
                                        version: 3
                                    },
                                }]],
                                // 开启babel缓存，提高性能; (未变化的不用重新加载)
                                cacheDirectory: true
                            },
                        }],
                        exclude: /node_modules/,
                        include: path.resolve(__dirname, 'src'),
                    },
                    {
                        test: /\.(png|svg|jpg|jpeg|gif)$/i,
                        type: 'asset',
                        exclude: /node_modules/,
                        parser: {
                            dataUrlCondition: {
                                // <10kb转成base64(asset/inline) >10按源资源(asset/source)
                                maxSize: 10 * 1024
                            }
                        },
                        generator: {
                            filename: 'img/[hash][ext][query]'
                        },
                    },
                    {
                        test: /\.(woff|woff2|eot|ttf|otf)$/i,
                        loader: 'file-loader',
                        exclude: /node_modules/,
                        options: {
                            limit: 8192,
                            name: "fonts/[name][ext]?[hash:8]"
                        }
                    },
                    // {
                    //     test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    //     type: 'asset/resource',
                    //     exclude: /node_modules/,
                    //     generator: {
                    //         filename: 'font/[hash][ext][query]',
                    //     },
                    // },
                    {
                        test: /\.html$/,
                        use: [{
                            loader: 'html-loader',
                            options: {
                                // minimize: true,
                                // removeComments: false,
                                // collapseWhitespace: false
                            }
                        }],
                    }
                ]
            },

        ],
    },
    resolve: {
        extensions: [".js", ".json", ".vue", ".jsx"],
        modules: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules")],
        alias: {
            "@": path.resolve(__dirname, "src"),
            "modules": path.resolve(__dirname, "modules"),
        },
    },
    plugins: [

        new HtmlWebpackPlugin({
            title: 'webapck开发环境',
            // filename: 'static/index.html',
            filename: 'index.html',
            template: path.resolve(__dirname, './public/index.html'),
            minify: {
                // 删除多余的属性
                removeRedundantAttributes: true,
                // 折叠空白区域
                collapseWhitespace: true,
                // 移除属性的引号
                removeAttributeQuotes: true,
                // 移除注释
                removeComments: true,
                // 省略只有 boolean 值的属性值 例如：readonly checked
                collapseBooleanAttributes: true
            },
        }),

        // 友好的终端错误显示方式
        new FriendlyErrorsPlugin({
            // 运行成功
            compilationSuccessInfo: {
                message: [`你的应用程序在这里运行：http://${ip}:${this.port}`],
                // notes:['有些附加说明要在成功编辑时显示']
            },
            //  运行错误
            onErrors: function (severity, errors) {
                console.log(`运行错误================`);
                // 可以收听插件转换和优先级的错误
                // 严重性可以是'错误'或'警告'
                if (severity !== 'error') {
                    return;
                }
                const error = errors[0];
                notifier.notify({
                    title: "Webpack error",
                    message: severity + ': ' + error.name,
                    subtitle: error.file || '',
                    // icon: ICON
                });
            },
            //是否每次编译之间清除控制台
            //默认为true
            clearConsole: true,
        }),

        new Visualizer({
            filename: './statistics.html'
        }),
    ],
}